<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="./font-syl/iconfont.css">
	<link rel="stylesheet" href="./css/list.css">
	<style>
		a {
			text-decoration: none;
			color: #666666;
		}

		.cont {
			width: 1000px;
			overflow: hidden;
			/* margin: 50px auto; */
		}

		.box {
			width: 200px;
			/* border: solid 1px black; */
			float: left;
			text-align: center;
			box-sizing: border-box;
			margin-top: 50px;
		}

		.box img {
			width: 80%
		}

		.box p {
			line-height: 20px;
			height: 40px;
			overflow: hidden;
		}

		.pageBox {
			display: flex;
			width: 700px;
			justify-content: space-around;
			align-items: center;
			/* margin: 50px auto; */
			margin-top: 50px;
			margin-left: 150px;
		}

		.pageBox>span {
			display: block;
			width: 100px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border: solid 1px black;
			border-radius: 10px;
		}

		.pageList {
			display: flex;
		}

		.pageList span {
			width: 40px;
			height: 40px;
			border: solid 1px black;
			display: block;
			line-height: 40px;
			text-align: center;
			margin: 0 10px;
		}


		ul {
			padding: 0;
			margin: 0;
		}

		li {
			list-style: none;
			float: left;
		}


		/*清除浮动*/
		.clearfix:before,
		.clearfix:after {
			content: "";
			display: table;
		}

		.clearfix:after {
			clear: both;
		}

		.clearfix {
			*zoom: 1;
		}

		.fl {
			float: left;
		}

		/*header结束*/

		/*banner开始*/
		.banner {
			width: 1355px;
			margin: 0 auto;
		}

		.banner li a {
			float: left;
			display: block;
			text-decoration: none;
			height: 369px;
			width: 253px;
			border: 1px solid #eeeeee;
			margin: 10px 20px 0 0;
		}

		.banner li a img {
			display: block;
			margin: 16px auto;
		}

		.banner li a span {
			color: #000000;
			padding-left: 16px;
			font-size: 12px;

		}

		.banner li a p {
			padding-left: 16px;
			color: #888888;
			line-height: 10px;
			text-decoration: underline;
			font-size: 12px;

		}

		.banner li a h4 {
			color: #ff4200;
			margin: 30px 0 0 16px;
		}

		.banner li a .last {
			width: 220px;
			height: 20px;
			/*background-color: pink;*/
			margin: 0 auto;

		}

		.banner li a .tm {
			height: 18px;
			margin: 0;
			float: left;
		}

		.banner li a input {
			display: block;
			float: right;
			color: #888888;
			margin-right: 5px;
			width: 105px;
			height: 16px;
			border: 1px solid #cccccc;

		}

		.banner li a:hover {
			color: #000000;
			border-color: #ff4200;
			text-decoration: underline;
		}

		.banner li .no_rb {
			margin: 10px 0;
		}

		.banner li a h5:hover {
			color: #000000;
		}

		/*banner结束*/
		.btn_top {
			position: fixed;
			right: 10px;
			bottom: 50px;
			width: 43px;
			height: 50px;
			background: url("images/btn.png");
		}

		.next-btn {
			height: 37px;
			width: 500px;
			margin: 50px auto;
			/*background-color: pink;*/
		}

		.next-btn .first {


			background-color: #ff4200;
			color: #fff;
			/*margin: 0 auto;*/
		}

		.next-btn a {

			float: left;
			width: 35px;
			height: 35px;
			display: block;
			color: #333333;
			font-size: 13px;
			border: 1px solid #cccccc;
			text-align: center;
			line-height: 35px;
			text-decoration: none;

		}

		.next-btn input {
			height: 18px;
			width: 45px;
		}

		.next-btn a:hover {
			text-decoration: underline;
		}

		.footer {
			height: 38px;
			width: 1357px;
			margin: 0 auto;
			background-color: #f2f2f2;

		}

		.footer a {
			color: #666666;
			/*text-decoration: none;*/
			font-size: 13px;
			padding-left: 10px;
			text-align: center;
			line-height: 38px;
		}

		.footer a:hover {
			color: #f85300;
		}

		.footer3 {
			width: 1194px;
			height: 70px;
			border-top: 1px solid #dddddd;
			border-bottom: 1px solid #dddddd;
			margin: 50px auto;
		}

		.footer3 li a {
			text-decoration: none;
			text-align: center;
			line-height: 35px;
			color: #6c6c6c;
			border-right: 1px solid #dddddd;
			font-size: 13px;
			padding-right: 10px;
			padding-left: 10px;

		}

		.last {
			width: 1194px;
			height: 200px;
			margin: 0 auto;
		}

		.last li a {
			text-decoration: none;
			text-align: center;
			line-height: 35px;
			color: #6c6c6c;
			font-size: 13px;
			padding-right: 5px;
			padding-left: 5px;
		}

		.last li a:hover {
			color: #f85300;
		}

		.last span {
			border-right: 1px solid #dddddd;
			text-align: center;
			line-height: 35px;
			font-size: 13px;
			padding-right: 5px;
			padding-left: 5px;
			color: #9c9c9c;
		}

		.jiesuan {
			position: fixed;
			top: 50%;
			right: 150px;
			background-color: pink;
			padding: 15px;
			border-radius: 15px;
			font-size: 25px;
			color: purple;
		}
	</style>
</head>

<body>
	<!-- 头部开始 -->
	<div class="listheader">
		<div class="w">
			<div class="left">
				<ul>
					<li>
						中国大陆
						<ol>
							<li><a href="javascript:;">全球</a></li>
							<li><a href="javascript:;">中国大陆</a></li>
							<li><a href="javascript:;">中国香港</a></li>
							<li><a href="javascript:;">中国台湾</a></li>
							<li><a href="javascript:;">中国澳门</a></li>
							<li><a href="javascript:;">韩国</a></li>
							<li><a href="javascript:;">马来西亚</a></li>
							<li><a href="javascript:;">澳大利亚</a></li>
							<li><a href="javascript:;">新加坡</a></li>
							<li><a href="javascript:;">新西兰</a></li>
							<li><a href="javascript:;">加拿大</a></li>
							<li><a href="javascript:;">日本</a></li>
							<li><a href="javascript:;">越南</a></li>
							<li><a href="javascript:;">泰国</a></li>
							<li><a href="javascript:;">菲律宾</a></li>
							<li><a href="javascript:;">柬埔寨</a></li>
						</ol>
					</li>
					<li><a href="javascript:;">淘宝昵称</a>
						<!-- <div class="message">个人信息</div> -->
					</li>
					<li><a href="javascript:;">手机逛淘宝</a></li>
					<li><a href="javascript:;">网页无障碍</a></li>
				</ul>
			</div>
			<div class="right">
				<ul>
					<li><a href="javascript:;">淘宝网首页</a></li>
					<li class="icon"><a href="javascript:;">我的淘宝 </a>
						<ul>
							<li>已买到的宝贝</li>
							<li>我的足迹</li>
						</ul>
					</li>
					<li class="car"><a href="javascript:;">购物车</a></li>
					<li class="icon star"><a href="javascript:;">收藏夹</a>
						<ul>
							<li>收藏的宝贝</li>
							<li>收藏的店铺</li>
						</ul>
					</li>
					<li><a class="free" href="javascript:;">商品分类</a> <a class="free" href="javascript:;">免费开店</a></li>
					<li class="line"></li>
					<li class="icon"><a href="javascript:;">千牛卖家中心</a>
						<ul>
							<li>开店入驻</li>
							<li>已卖出的宝贝</li>
							<li>出售中的宝贝</li>
							<li>卖家服务市场</li>
							<li>卖家培训中心</li>
							<li>体检中心</li>
							<li>电商学习中心</li>
						</ul>
					</li>
					<li class="icon"><a href="javascript:;">联系客服</a>
						<ul>
							<li>消费者客服</li>
							<li>卖家客服</li>
							<li>意见反馈</li>
							<li>网页版旺旺</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 头部结束 -->



	<!-- 搜索框开始 -->
	<div class="listSearch">
		<div class="w">
			<h1>
				<a href="./index.html">淘宝</a>
			</h1>
			<div class="search">
				<div class="left">
					<div class="text icon">宝贝</div>
					<div class="in">店铺</div>
				</div>
				<input type="text" placeholder="手机">
				<button class="right">搜索</button>
			</div>
		</div>

	</div>
	<!-- 搜索框结束 -->

	<div class="w clearfix">
		<div class="main">
			<!-- 分类列表开始 -->
			<div class="phoneMessage">

				<div class="up">
					<span>所有宝贝</span>
				</div>

				<div class="middle">
					<div class="left icon1">所有分类</div>
					<div class="right icon2">收起筛选</div>
				</div>

				<div class="down">
					<div class="content">
						<div class="title">
							品牌 :
						</div>
						<div class="box">
							<ul>
								<li>
									<input type="checkbox">
									<span>华为</span>
								</li>
								<li>
									<input type="checkbox">
									<span>honor荣耀</span>
								</li>
								<li>
									<input type="checkbox">
									<span>MIUI/小米</span>
								</li>
								<li>
									<input type="checkbox">
									<span>vivo</span>
								</li>
								<li>
									<input type="checkbox">
									<span>苹果</span>
								</li>
								<li>
									<input type="checkbox">
									<span>oppo</span>
								</li>
								<li>
									<input type="checkbox">
									<span>三星</span>
								</li>
								<li>
									<input type="checkbox">
									<span>守护宝</span>
								</li>
								<li>
									<input type="checkbox">
									<span>owwo欧沃</span>
								</li>
								<li>
									<input type="checkbox">
									<span>realme(手机)</span>
								</li>
								<li>
									<input type="checkbox">
									<span>魅族</span>
								</li>
								<li>
									<input type="checkbox">
									<span>SANNAING</span>
								</li>
								<li>
									<input type="checkbox">
									<span>酷派</span>
								</li>
								<li>
									<input type="checkbox">
									<span>HEEXON/恒享</span>
								</li>
								<li>
									<input type="checkbox">
									<span>DOOV朵唯</span>
								</li>
								<li>
									<input type="checkbox">
									<span>纽曼</span>
								</li>
								<li>
									<input type="checkbox">
									<span>OnePlus/一加</span>
								</li>
								<li>
									<input type="checkbox">
									<span>唯米</span>
								</li>
								<li>
									<input type="checkbox">
									<span>诺基亚</span>
								</li>
								<li>
									<input type="checkbox">
									<span>努比亚</span>
								</li>
								<li>
									<input type="checkbox">
									<span>美图</span>
								</li>
								<li>
									<input type="checkbox">
									<span>坚果</span>
								</li>
								<li>
									<input type="checkbox">
									<span>小辣椒</span>
								</li>
								<li>
									<input type="checkbox">
									<span>恒语</span>
								</li>
								<li>
									<input type="checkbox">
									<span>尼凯恩</span>
								</li>
								<li>
									<input type="checkbox">
									<span>皓轩</span>
								</li>
								<li>
									<input type="checkbox">
									<span>索尼</span>
								</li>
								<li>
									<input type="checkbox">
									<span>天语</span>
								</li>
								<li>
									<input type="checkbox">
									<span>创星</span>
								</li>
								<li>
									<input type="checkbox">
									<span>联想</span>
								</li>
								<li>
									<input type="checkbox">
									<span>飞利浦</span>
								</li>
								<li>
									<input type="checkbox">
									<span>摩托罗拉</span>
								</li>

							</ul>
							<br>
							<div class="success">
								<input type="submit" value="提交" class="submit">
								<input type="reset" value="取消" class="reset">
							</div>
						</div>

						<div class="select">多选</div>
						<div class="more"></div>
					</div>
					<div class="content gao">
						<div class="title">
							手机类型 :
						</div>
						<div class="box">
							<ul>
								<li>
									<input type="checkbox">
									<span>智能手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>时尚手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>拍照手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>4G手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>音乐手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>商务手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>女性手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>备用手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>老人手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>直板手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>老年机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>电视手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>儿童手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>3G手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>三防手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>盲人手机</span>
								</li>
								<li>
									<input type="checkbox">
									<span>卡片手机</span>
								</li>


							</ul>
							<br>
							<div class="success">
								<input type="submit" value="提交" class="submit">
								<input type="reset" value="取消" class="reset">
							</div>
						</div>

						<div class="select">多选</div>
						<div class="more"></div>
					</div>
					<div class="content gao">
						<div class="title">
							机身内存ROM :
						</div>
						<div class="box">
							<ul>
								<li>
									<input type="checkbox">
									<span>512GB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>512M</span>
								</li>
								<li>
									<input type="checkbox">
									<span>256GB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>256M</span>
								</li>
								<li>
									<input type="checkbox">
									<span>128G</span>
								</li>
								<li>
									<input type="checkbox">
									<span>128M</span>
								</li>
								<li>
									<input type="checkbox">
									<span>80MB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>64g</span>
								</li>
								<li>
									<input type="checkbox">
									<span>64M</span>
								</li>
								<li>
									<input type="checkbox">
									<span>64G以上</span>
								</li>
								<li>
									<input type="checkbox">
									<span>32G</span>
								</li>
								<li>
									<input type="checkbox">
									<span>32M</span>
								</li>
								<li>
									<input type="checkbox">
									<span>16g</span>
								</li>
								<li>
									<input type="checkbox">
									<span>16M</span>
								</li>
								<li>
									<input type="checkbox">
									<span>8g</span>
								</li>
								<li>
									<input type="checkbox">
									<span>8m</span>
								</li>
								<li>
									<input type="checkbox">
									<span>4m</span>
								</li>
								<li>
									<input type="checkbox">
									<span>4G</span>
								</li>
								<li>
									<input type="checkbox">
									<span>1TB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>1g</span>
								</li>


							</ul>
							<br>
							<div class="success">
								<input type="submit" value="提交" class="submit">
								<input type="reset" value="取消" class="reset">
							</div>
						</div>

						<div class="select">多选</div>
						<div class="more"></div>
					</div>
					<div class="content gao">
						<div class="title">
							运行内存RAM :
						</div>
						<div class="box">
							<ul>
								<li>
									<input type="checkbox">
									<span>768MB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>512MB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>256MB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>150MB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>128MB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>70MB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>64MB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>32MB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>16MB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>12GB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>8GB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>8MB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>6GB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>6G</span>
								</li>
								<li>
									<input type="checkbox">
									<span>4GB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>4MB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>3GB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>2GB</span>
								</li>
								<li>
									<input type="checkbox">
									<span>1GB</span>
								</li>

							</ul>
							<br>
							<div class="success">
								<input type="submit" value="提交" class="submit">
								<input type="reset" value="取消" class="reset">
							</div>
						</div>

						<div class="select">多选</div>
						<div class="more"></div>
					</div>
					<div class="sxtj">
						<div class="left">筛选条件 :</div>
						<div class="right">
							<dl>
								<dt class="icon">附加功能</dt>
								<dd>
									<a href="javascript:;">双卡双待</a>
									<a href="javascript:;">重力感应</a>
									<a href="javascript:;">距离感应</a>
									<a href="javascript:;">光线感应</a>
									<a href="javascript:;">手电筒</a>
									<a href="javascript:;">手电筒、收音机、日历</a>
									<a href="javascript:;">收音机</a>
									<a href="javascript:;">重力传感器</a>
									<a href="javascript:;">电视播放</a>
									<a href="javascript:;">备用机</a>
									<a href="javascript:;">FM收音机</a>
									<a href="javascript:;">OTG</a>
									<a href="javascript:;">语音播报</a>
									<a href="javascript:;">指纹传感器、接近传感器</a>
								</dd>
							</dl>
							<dl>
								<dt class="icon">网络类型</dt>
								<dd>
									<a href="javascript:;">4G+全网通</a>
									<a href="javascript:;">移动、联通、电信4G</a>
									<a href="javascript:;">无需合约版</a>
									<a href="javascript:;">中国电信 中国联通</a>
									<a href="javascript:;">GSM</a>
									<a href="javascript:;">GSM/WCDMA/LTE</a>
									<a href="javascript:;">FDD-LTE/TD-SCDMA</a>
									<a href="javascript:;">联通2G</a>
									<a href="javascript:;">CDMA</a>
									<a href="javascript:;">TD-LTE</a>
									<a href="javascript:;">FDD-LTE</a>

								</dd>
							</dl>
							<dl>
								<dt class="icon">核心数</dt>
								<dd>
									<a href="javascript:;">八核</a>
									<a href="javascript:;">四核</a>
									<a href="javascript:;">十核</a>
									<a href="javascript:;">单核心</a>
									<a href="javascript:;">六核</a>
									<a href="javascript:;">双核</a>
									<a href="javascript:;">64位架构的芯片</a>
									<a href="javascript:;">四核1.8GHz</a>
									<a href="javascript:;">双四核</a>
									<a href="javascript:;">1.3GHz</a>

								</dd>
							</dl>
							<dl>
								<dt class="icon">像素</dt>
								<dd>
									<a href="javascript:;">4800万</a>
									<a href="javascript:;">4800万+500万</a>
									<a href="javascript:;">4000万</a>
									<a href="javascript:;">2400万</a>
									<a href="javascript:;">2300万</a>
									<a href="javascript:;">2100万</a>
									<a href="javascript:;">2000万</a>
									<a href="javascript:;">1600万</a>
									<a href="javascript:;">1600万像素</a>
									<a href="javascript:;">1300万</a>
									<a href="javascript:;">1200万</a>
									<a href="javascript:;">800万</a>
									<a href="javascript:;">500万</a>
									<a href="javascript:;">320万</a>
									<a href="javascript:;">200万</a>
									<a href="javascript:;">130万</a>
									<a href="javascript:;">30万</a>
									<a href="javascript:;">无摄像头</a>

								</dd>
							</dl>
						</div>
					</div>

				</div>
			</div>

			<div class="guess">
				<span>您是不是想找： </span>
				<a href="javascript:;">华为</a>
				<a href="javascript:;">苹果手机</a>
				<a href="javascript:;">华为手机</a>
				<a href="javascript:;">小米</a>
				<a href="javascript:;">荣耀</a>
				<a href="javascript:;">小米手机</a>
				<a href="javascript:;">苹果12</a>
				<a href="javascript:;">vivo</a>
				<a href="javascript:;">苹果11</a>
				<a href="javascript:;">oppo</a>
				<a href="javascript:;">红米</a>
				<a href="javascript:;">三星</a>
				<a href="javascript:;">手机vivo</a>
				<a href="javascript:;">魅族</a>
			</div>
			<!-- 分类列表结束 -->
			<!-- 排序开始 -->
			<div class="sort">
				<ul>
					<li>综合排序</li>
					<li>销量<span>销量从高到低</span></li>
					<li>信用<span>信用从高到低</span></li>
					<li class="icon">
						价格
						<ol>
							<li class="sx">价格从低到高</li>
							<li class="dx">价格从高到低</li>

						</ol>
					</li>
					<li>&yen;<input type="number" class="ipt1"> -- &yen;
						<input type="number" class="ipt2">
						<button>确定</button>
					</li>
				</ul>
			</div>
			<!-- 排序结束 -->



			<a href="./cart.html" class="jiesuan">去购物车</a>
			<div class="w">
				<div class="cont"></div>
				<div class="pageBox">
					<span class="prev">上一页</span>
					<div class="pageList">
					</div>
					<span class="next">下一页</span>
				</div>
			</div>








			<div class="footer3">
				<ul>
					<li><a href="#">阿里巴巴集团</a></li>
					<li><a href="#">淘宝网</a></li>
					<li><a href="#">天猫</a></li>
					<li><a href="#">聚划算</a></li>
					<li><a href="#">全球速卖通</a></li>
					<li><a href="#">阿里巴巴国际交易市场</a></li>
					<li><a href="#">1688</a></li>
					<li><a href="#">阿里妈妈</a></li>
					<li><a href="#">飞猪</a></li>
					<li><a href="#">淘小铺</a></li>
					<li><a href="#">阿里云计算</a></li>
					<li><a href="#">AliOS</a></li>
					<li><a href="#">阿里通信</a></li>
					<li><a href="#">一淘</a></li>
					<li><a href="#">万网</a></li>
					<li><a href="#">高德</a></li>
					<li><a href="#">UC</a></li>
					<li><a href="#">友盟</a></li>
					<li><a href="#">阿里安全虾米</a></li>
					<li><a href="#">大麦网</a></li>
					<li><a href="#">钉钉</a></li>
					<li><a href="#">支付宝</a></li>
					<li><a href="#">优酷</a></li>
					<li><a href="#">土豆</a></li>
					<li><a href="#">阿里健康</a></li>
					<li><a href="#">阿里影业</a></li>
					<li><a href="#">阿里体育</a></li>
					<li><a href="#">网商银行</a></li>
				</ul>
			</div>
			<div class="last">
				<ul>
					<li><a href="#">关于淘宝</a></li>
					<li><a href="#">合作伙伴</a></li>
					<li><a href="#">营销中心</a></li>
					<li><a href="#">廉正举报</a></li>
					<li><a href="#">联系客服</a></li>
					<li><a href="#">开放平台</a></li>
					<li><a href="#">诚征英才</a></li>
					<li><a href="#">联系我们</a></li>
					<li><a href="#">网站地图</a></li>
					<li><a href="#">隐私权政策</a></li>
					<li><a href="#">法律声明</a></li>
					<li><a href="#">知识产权</a></li>
					<li><a href="#">版权所有</a></li>
					<span>© 2003-现在 Taobao.com 版权所有</span>
					<li><a href="#">增值电信业务经营许可证：浙B2-20080224</a></li>
					<li><a href="#">增值电信业务经营许可证（跨地区）： B2-20150210</a></li>
					<span>浙网文（2019）1033-086号</span>
					<span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</span>
					<span>互联网药品信息服务资格证书（浙）-经营性-2018-0010</span>
					<span>短消息类服务接入代码使用证书：号【2016】00154-A01</span>
					<span>信息网络传播视听许可证：1109364号</span>
					<span>出版物网络交易平台服务经营备案号：新出发浙备字第002号</span>
					<span>浙公网安备 33010002000078号</span>
					<span>广播电视节目制作经营许可证（浙）字第01012号</span>
					<span>市场名称登记证：工商网市字3301004120号</span>
					<span>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00004号</span>

				</ul>
			</div>
</body>
<script src="./js/ajax.js"></script>
<script src="./js/list.js"></script>
<script>
	class Page {
		constructor(ops) {
			this.num = ops.num || 10;
			this.index = ops.index || 0;
			this.url = ops.url;
			this.prev = ops.prev;
			this.next = ops.next;
			this.cont = ops.cont;
			this.pageList = ops.pageList;

			this.load();
			this.addEvent();
		}
		addEvent() {
			const that = this;
			this.pageList.onclick = function (eve) {
				const e = eve || window.event;
				const target = e.target || e.srcElement;
				if (target.tagName === "SPAN") {
					that.setActive(target);
					that.index = (target.index);
					that.render();
				}
			}
			this.prev.onclick = function () {
				if (that.index === 0) {
					that.index = 0;
				} else {
					that.index--
				}
				that.render();
				that.setActive(that.pageList.children[that.index]);
			}
			this.next.onclick = function () {
				if (that.index === that.maxPage - 1) {
					that.index = that.maxPage - 1;
				} else {
					that.index++
				}
				that.render();
				that.setActive(that.pageList.children[that.index]);
			}
		}
		setActive(target) {
			[...this.pageList.children].forEach(val => {
				val.style.background = "none";
				val.style.color = "#000";
			})
			target.style.background = "#55f";
			target.style.color = "#fff";
		}
		load() {
			ajax("http://localhost:3000/getGoods", (res) => {
				this.res = JSON.parse(res).data;
				let data = this.res;
				this.render();
				this.createPage(data);
				const that = this;
				; (function () {
					const sx = document.querySelector(".sort ul li ol .sx");
					const dx = document.querySelector(".sort ul li ol .dx");
					const ipt1 = document.querySelector(".sort ul li .ipt1");
					const ipt2 = document.querySelector(".sort ul li .ipt2");
					const obtn = document.querySelector(".sort ul li button");
					// const cont=document.querySelector(".cont");
					// 渲染页面
					function myrender(data) {
						let str = "";
						for (
							let i = that.index * that.num;
							i < that.index * that.num + that.num;
							i++
						) {
							if (i < data.length) {
								str += `<div class="box">
                                <a href="http://localhost:3000/info.html?${data[i].Id}">
                                    <img src="${data[i].img_001}" alt="">
                                    <p>${data[i].name}</p>
                                    <p class="price">价格：${data[i].price}</p>
                                </a>
                                <input myid="${data[i].Id}" type="button" value="加入购物车" class="addCart">
                            </div>`;
							}
						}
						that.cont.innerHTML = str;
					}
					// 价格从低到高
					sx.onclick = function () {
						data.sort((a, b) => {
							return parseInt(a.price) - parseInt(b.price);
						});
						// cont.innerHTML = render(data);
						myrender(data);
					};
					// 价格从高到低
					dx.onclick = function () {
						data.sort((a, b) => {
							return parseInt(b.price) - parseInt(a.price);
						});
						// imgUl.innerHTML = render(data);
						myrender(data);
					};
					// 价格区间筛选
					obtn.onclick = function () {
						if (ipt1.value === "") {
							ipt1.style.backgroundColor = "red"; return;
						} else if (ipt2.value === "") {
							ipt2.style.backgroundColor = "red"; return;
						}
						let newdata = data.filter((val) => {
							return parseFloat(val.price) >= ipt1.value && parseFloat(val.price) <= ipt2.value
						})
						// imgUl.innerHTML = render(newdata);
						myrender(newdata);
						that.createPage(newdata);
					};
					ipt1.onfocus = function () {
						ipt1.style.backgroundColor = "#ffffff";
					};
					ipt2.onfocus = function () {
						ipt2.style.backgroundColor = "#ffffff";
					};


				})();

			})
		}
		createPage(data) {
			this.maxPage = Math.ceil(data.length / this.num);

			let str = "";
			for (let i = 0; i < this.maxPage; i++) {
				str += `<span>${i + 1}</span>`
			}
			this.pageList.innerHTML = str;

			for (let i = 0; i < this.pageList.children.length; i++) {
				this.pageList.children[i].index = i;
			}
			this.setActive(this.pageList.children[this.index]);
		}
		render() {
			let str = "";

			// 0~3      0index*3num ~ 0index*3num+3num
			// 3~6      1index*3num ~ 1index*3num+3num
			// 6~9      2index*3num ~ 2index*3num+3num
			// 9~12     3index*3num ~ 3index*3num+3num

			for (
				let i = this.index * this.num;
				i < this.index * this.num + this.num;
				i++
			) {
				if (i < this.res.length) {
					str += `<div class="box">
                                <a href="http://localhost:3000/info.html?${this.res[i].Id}">
                                    <img src="${this.res[i].img_001}" alt="">
                                    <p>${this.res[i].name}</p>
                                    <p class="price">价格：${this.res[i].price}</p>
                                </a>
                                <input myid="${this.res[i].Id}" type="button" value="加入购物车" class="addCart">
                            </div>`;
				}
			}
			this.cont.innerHTML = str;
		}
	}

	new Page({
		url: "",
		num: 10,
		index: 0,
		prev: $(".prev"),
		next: $(".next"),
		cont: $(".cont"),
		pageList: $(".pageList")
	})

	class AddCart {
		constructor() {
			this.cont = $(".cont");
			this.addEvent();
		}
		addEvent() {
			const that = this;
			this.cont.onclick = function (eve) {
				const e = eve || window.event;
				const target = e.target || e.srcElement;
				if (target.className.includes("addCart")) {
					that.Id = target.getAttribute("myid");
					that.price = target.parentNode.querySelector(".price").innerText;
					that.setLocal();
				}
			}
		}
		setLocal() {
			// localStorage.setItem("");

			// 多条商品？
			// 多个商品存一个存储，以数组的形式
			// 一个商品要存哪些数据？id，num，
			// 一个商品两个信息，以对象形式
			// 最终数据格式：[{id:1,num:1},{id:2,num4},{},...]

			// 一个商品点加入购物车两次
			// 如何得知一个商品被点击了多次，先判断数组中是否存在
			// 数组从哪来？先获取

			// 将来存什么，此时就读什么
			let goods = localStorage.getItem("goods");
			goods = goods ? JSON.parse(goods) : [];

			let i;
			const flag = goods.some((val, idx) => {
				i = idx;
				return val.Id === this.Id;
			})

			if (flag) {
				goods[i].num++
			} else {
				goods.push({
					Id: this.Id,
					num: 1,
					price: this.price - 0,
					check: false
				})
			}
			// 操作完数组后，一定要将数组存到本地存储中
			localStorage.setItem("goods", JSON.stringify(goods));
		}
	}
	new AddCart();

	function $(select) {
		return document.querySelector(select);
	}

</script>

</html>